<template>

  <div id="finalbox">
    <div id="finalbox-left">
      <p @click="router.push('/home/shouye')" :class="{isHiddon:store.state.isCollapse}">ShiFang</p>
      <LeftComponent></LeftComponent>
    </div>

    <div id="finalbox-right">

      <div id="finalbox-header">
        <!--按钮-->
        <el-radio-group  style="background-color: #409EFF;padding: 0">
          <el-radio-button @click="changeDisplay">
            <el-icon style="font-size: 20px;">
              <Operation />
            </el-icon>
          </el-radio-button>
        </el-radio-group>

<!--        确保只有userObj不为null时才会渲染    -->
        <ul>
          <li>
            <el-icon class="chat-icon" @click="$router.push('/home/chat')">
            <ChatDotRound />
            </el-icon>
            <div>消息</div>
          </li>
          <li>
            <el-icon><Document /></el-icon>
            <div>文档</div>
          </li>
          <li @click="lockwindows">
            <el-icon><Lock /></el-icon>
            <div>锁屏</div>
          </li>
          <li @click="toggleFullscreen">
            <el-icon><FullScreen /></el-icon>
            <div>全屏</div>
          </li>
<!--          v-if="userObj"  -->
          <li class="last-li-header" style="width: 100px;position: relative">
            <div v-if="userObj.consultantAvatar" style="width: 40px;height: 40px;border-radius: 50%">
              <img :src="userObj.consultantAvatar" width="40px">
            </div>
            <div>{{ userObj.consultantName }}</div>
            <!--悬浮层-->
            <ul class="Right-over">
              <li @click="router.push('/home/user')">
                个人中心
              </li>
              <li class="changepassword">
                <div @click="xiugaiVisible = true">修改密码</div>
                <!--    修改密码页面 -->
                <el-dialog v-model="xiugaiVisible" title="重置密码" width="500">
                  <el-form>
                    <el-form-item label="登录名称" :label-width="formLabelWidth" required>
                      <el-input v-model="userObj.consultantName" />
                    </el-form-item>
                    <el-form-item label="旧密码" :label-width="formLabelWidth" required>
                      <el-input v-model="passwordPage.oldpassword" />
                    </el-form-item>
                    <el-form-item label="新密码" :label-width="formLabelWidth" required>
                      <el-input v-model="passwordPage.newpassword"/>
                    </el-form-item>
                    <el-form-item label="确认密码" :label-width="formLabelWidth" required>
                      <el-input  v-model="passwordPage.confirmpassword"/>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <div class="dialog-footer">
                      <el-button @click="xiugaiVisible = false" style="padding: 0 10px">取消</el-button>
                      <el-button type="primary" @click="changePassword" style="padding: 0 10px">
                        确认修改
                      </el-button>
                    </div>
                  </template>
                </el-dialog>
              </li>
              <li>
                <div @click="changeStyle = true">切换主题</div>
                <el-dialog v-model="changeStyle" title="切换主题" width="600">
                  <ul class="changestyle">
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                    <li>
                      <div>
                        <p></p>
                        <div></div>
                      </div>
                      <span>蓝</span>
                    </li>
                  </ul>
                </el-dialog>
              </li>
              <li @click="logout">
                退出登录
              </li>
            </ul>
          </li>

        </ul>

      </div>

      <div id="finalbox-center">

        <div>
          <div @click="router.push('/home/shouye')" class="sp">
            首 页
          </div>
          <el-tag
              id="hoverDiv"
              style="cursor: pointer;border-radius: 0;padding-left: 10px;background-color: #dddddd;color: #666666;"
              size="large"
              v-for="(value, index) in dynamicTags"
              :key="index"
              closable
              :disable-transitions="false"
              @close="handleClosetag(index)"
              @click="router.push(value.path)"
          >
            {{ value.title }}
          </el-tag>
        </div>
      </div>

      <div id="finalbox-foot">
<!--  用于它的子组件页面展示 -->
        <router-view></router-view>
      </div>

    </div>
  </div>

</template>

<script setup>
import {
  Menu as IconMenu,
  ChatDotRound
} from '@element-plus/icons-vue'
import {computed, ref, onMounted, reactive} from 'vue'
import { ElInput } from 'element-plus'
import { useFullscreen } from '@vueuse/core'
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import { ElMessage } from 'element-plus'
import LeftComponent from "@/components/LeftComponent.vue";
import axios  from "axios";
import {
  Lock,
  Operation,
  Document,
  FullScreen,
} from '@element-plus/icons-vue';

const store = useStore();
const router =useRouter();
const inputValue = ref('');
const { toggle, isFullscreen } = useFullscreen()
const toggleFullscreen = toggle;
//初始修改密码页面为false  不显示
let xiugaiVisible = ref(false);
//初始修改主题页面为false  不显示
let changeStyle = ref(false);
const formLabelWidth = '140px';

//密码页面的初始值
const passwordPage = reactive({
  oldpassword: '',
  newpassword: '',
  confirmpassword: '',
});

const userObj = computed(()=>{
  //返回此对象
  return store.state.user;
})

//点击事件传值给网页
const lockwindows = function () {
  router.push("/lockwindow");
  localStorage.setItem('lockwindows-status', JSON.stringify(true));
}
//点一下把 坐标标签栏的文字传 vuex 里, 注意传的时候记得把path也传过去,这样组成一个对象数组, 然后进行遍历展示  可以在vuex里进行增删

//获取数组
const dynamicTags = computed(()=>{
  return store.state.tagArr;
});
const inputVisible = ref(false);

//点击事件取反值
const changeDisplay = () => {
  store.state.isCollapse = !store.state.isCollapse;
}

//删除顶部小标签
const handleClosetag = (index) => {
  //进行判断   最后一个
  if (index === 0){
    router.push('/home/shouye');
  }else{//不=0  不是最后一个
    router.push(dynamicTags.value[index - 1].path);
  }
  store.commit("deleteTagByindex", {index});
}


//确认修改密码
const changePassword = function () {
  //判断输入是否正确

}

//密码修改成功/基本信息修改成功
const open1 = () => {
  ElMessage({
    message: '修改成功.',
    type: 'success',
  })
}
//密码修改失败
const open2 = () => {
  ElMessage.error('旧密码错误/新密码与确认密码不一致.')
}
//退出登录
const logout = () => {
  sessionStorage.removeItem('user'); // 移除user键对应的项
  sessionStorage.removeItem('token');
  // 或者 sessionStorage.setItem('user', null); 也可达到类似效果，参考前面的解释
  router.push('/login'); // 跳转到登录页面
};

//封装函数   获取公告的数据
const pushAnnouncement = function (){
  // 获取公告数据
  axios.get('/announcement/selectByConsultantId',{
    params:{
      consultantId:1
    }
  })
      .then(res=>{
        console.log(res.data.data)
        if (res.data.code === 200){
          //传递到vuex
        }
      }).catch(err=>{
    console.error(err);
  })
}

onMounted(()=>{
  router.push('/home/shouye');
  pushAnnouncement();
  let user = JSON.parse(sessionStorage.getItem('user'));
  store.state.user = user;
})

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
ul, ol{
  list-style: none;
}
a{
  text-decoration: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
#finalbox{
  width: 100%;
  display: flex;
  /* overflow: hidden; */
}
#finalbox-right{
  width: 100%;
  height: 100vh;
  /* background-color: #C2BE9E; */
}
#chat-icon {

  width: 500px;
  color: #409EFF;
}
#chat-icon:hover {
  color: #66b1ff;
}
#finalbox-center{
  width: 100%;
  height: 32px;
  background-color: #ffffff;
}
#finalbox-foot{
  width: 99%;
  background-color: sandybrown;
}
#finalbox-left{
  height: 100vh;
  background-color: #2F4050;
}
#finalbox-left p{
  background-color: #3C8DBC;
  padding: 15px 0;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
#finalbox-header{
  display: flex;
  justify-content: space-between;
  height: 50px;
  background-color: #3C8DBC;
  /* --primary-color: #3C8DBC; 默认颜色 */
}
#finalbox-header>ul{
  display: flex;
}
#finalbox-header>ul>li{
  width: 55px;
  height: 49.5px;
  line-height: 49.5px;
  margin-right: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#finalbox-left>p{
  cursor: pointer;
}
.sp{
  color: #666666;
  background-color: #dddddd;
  font-size: 12px;
  line-height: 32px;
  padding: 0 20px;
  cursor: pointer;
}
#finalbox-center>div{
  display: flex;
}
#finalbox-header>ul>li{
  font-weight: 700;
  color: white;
  padding: 0 15px;
  cursor: pointer;
  text-align: center;
}
#finalbox-header>ul>li:hover{
  background-color: steelblue;
}
#hoverDiv:hover, .sp:hover{
  background-color: #aaaaaa!important;
}

.isHiddon{
  display: none;
}
.last-li-header>div>img{
  border-radius: 50%;
}
.last-li-header:hover .Right-over{
  display: block;
}
.Right-over{
  display: none;
  width: 170px;
  font-weight: 300!important;
  background-color: cadetblue;
  position: absolute;
  top: 50px;
  left: -40px;
  z-index: 2;
}
.changepassword .el-form .el-form-item{
  margin-bottom: 15px;
}
.changestyle{
  background-color: antiquewhite;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}

.changestyle>li{
  margin-bottom: 10px;
}
.changestyle>li>div{
  width: 170px;
  height: 60px;
  border: 1px solid white;
  background-color: aliceblue;
}
.changestyle>li>div>p{
  width: 100%;
  height: 20px;
  background-color: red;
}
.changestyle>li>div>div{
  width: 40px;
  height: 40px;
  background-color: #FFB800;
}
</style>
